<template>
  <div>
    <n-data-table class="s-table" :columns="columns" :data="data" :pagination="data.length > 0 ? paginations: false"
      :bordered="false" :loading="loading" />
  </div>
</template>
<script lang="ts" setup>
import { ref, unref, reactive, onMounted, computed, defineComponent, h } from 'vue';
import { anchorDark, useMessage, NButton, useDialog } from 'naive-ui';
import { useRoute } from 'vue-router';
// import { assVarListGets,assVarListDelete } from '@/api/GlobalVarMgt/GlobalVarMgt'; // todo open
const dialog = useDialog();
const message = useMessage();
const emits = defineEmits(['send']);

// table列表加载
let loading = ref(false);
// 标头数据
const columns = [
  {
    title: '变量名称',
    key: 'var_name',
  },
  {
    title: '资产状态',
    key: 'status',
    render(row) {
      return h('div', [
        h(
          NButton,
          {
            quaternary: true,
            size: 'small',
          },
          {
            default: () => {
              if (row.status == 0) {
                return '已废弃';
              }
              if (row.status == 1) {
                return '出库';
              }
              if (row.status == 2) {
                return '在库';
              }
              if (row.status == 3) {
                return '上架';
              }
              if (row.status == 4) {
                return '维修';
              }
            },
          }
        ),
      ]);
    },
  },
  {
    title: '资产类型',
    key: 'type_name',
  },
  {
    title: '使用',
    key: 'use',
    render(row) {
      return h('div', [
        h(
          NButton,
          {
            quaternary: true,
            size: 'small',
          },
          {
            default: () => {
              if (row.use == 1) {
                return '最近7天';
              }
              if (row.use == 2) {
                return '最近30天)';
              }
            },
          }
        ),
      ]);
    },
  },
  {
    title: '指定资产',
    key: 'ass_name',
  },
  {
    title: '值',
    key: 'var_value',
    width: 400,
    render(row) {
      return h('div', [
        h(
          NButton,
          {
            quaternary: true,
            size: 'small',
            class: 's-td',
          },
          { default: () => row.var_value }
        ),
      ]);
    },
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h('div', [
        h(
          NButton,
          {
            quaternary: true,
            type: 'info',
            size: 'small',
            onClick: () => edit(row),
            style: { marginRight: '10px' },
          },
          { default: () => '编辑' }
        ),
        h(
          NButton,
          {
            quaternary: true,
            type: 'info',
            size: 'small',
            onClick: () => del(row),
          },
          { default: () => '删除' }
        ),
      ]);
    },
  },
];

// 组件参数
const props = defineProps({
  pageParam: {
    type: Object,
    required: true,
  },
});

// 获取当前路由
const route = useRoute();
// 从路由参数中获取 id
const pageId = route.query.id;
console.log('id', pageId);

// 新增
const add = (row) => {
  // 发送新增消息
  emits('send', 'openAddForm');
};
// 编辑
const edit = (row) => {
  // 发送编辑消息
  emits('send', 'openEditForm', row);
};

// 删除
const del = (row) => {
  dialog.warning({
    title: '警告',
    content: '确定删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      let params = {
        ids: [row.id],
      };
      let res = await assVarListDelete(params);
      if (res.code == 200) {
        message.success('删除成功');
        refresh(searchParams);
      }
      if (res.code != 200) {
        message.error(res.msg || '删除失败');
      }
    },
  });
};

// 刷新数据回调用方法
function refresh(params) {
  // 判断params是否传递参数，传递参数需要保存，防止翻页丢失搜索条件
  if (params) {
    Object.assign(searchParams, params);
  }
  search(); // 重新获取列表数据
}

// 新增数据回调用方法
function newAdd(params) {
  // 发送新增消息
  emits('send', 'openAddForm');
}

// 列表数据
const data = ref([
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
  {
    id: 1,
    var_name: '123',
    status: 1,
    use: 1,
    type_name: '机柜类',
    ass_name: '123456',
    var_value: '变量值为列表:[[{"告警级别"}]]',
  },
]);

// 分页配置
const paginations = reactive({
  page: 1,
  pageSize: 12,
  showQuickJumper: true,
  showSizePicker: true,
  showPages: true,
  size: 'large',
  pageSizes: [10, 20, 30],
  prefix:()=> `共${total.value}条`,
  onChange: (page: number) => {
    paginations.page = page
    search();
  },
  onUpdatePageSize: (pageSize: number) => {
    paginations.pageSize = pageSize
    paginations.page = 1
    search();
  },
});
const total = ref(0);

// 保存搜索参数
const searchParams = reactive({});

// 列表获取数据
const search = async () => {
  const params = { page:paginations.page, pageSize:paginations.pageSize, ...searchParams};
  loading.value = true;
  const res = await assVarListGets(params);
  loading.value = false;
  if(res.code === 200) {
    data.value = res.data;
    total.value = res.total;
    return
  }
  message.error(res.msg);
};
// 初始化
function init() {
  // search();  // todo open
}

// 表格需要暴露出init、refresh方法
defineExpose({
  init,
  refresh,
  newAdd,
});
</script>

<style lang="less" scoped>
::v-deep .s-table .n-data-table-tr .n-data-table-th {
  border: none;
  background: #0e1e2e;
}
::v-deep .s-table .n-data-table-tr:nth-child(odd) .n-data-table-td {
  background: #182e46;
  color: #fff;
}

::v-deep .s-table .n-data-table-tr:nth-child(even) .n-data-table-td {
  background: #0e1e2e;
  color: #fff;
}
::v-deep .s-table .n-data-table .n-data-table-tr:hover {
  background-color: #1075c4 !important;
}

::v-deep
  .s-table
  .n-data-table
  .n-data-table-tr:not(.n-data-table-tr--summary):hover
  > .n-data-table-td {
  background-color: #1075c4 !important;
}

::v-deep .s-table .n-data-table .n-data-table-td {
  border-bottom: none !important;
}

::v-deep .n-button--info-type .n-button__content {
  border-bottom: 1px solid #0f6db5;
  color: #0f6db5;
}

::v-deep .s-td .n-button__content {
  display: inline-block;
  width: 400px;
  /* 设置文本溢出部分显示省略号 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

::v-deep .s-table .n-data-table-th {
  text-align: center !important;
}
::v-deep .s-table .n-data-table-td {
  text-align: center !important;
}

::v-deep .n-data-table-tr .n-data-table-th {
  border: none;
  background: #0e1e2e;
}

::v-deep .n-data-table-tr:nth-child(odd) .n-data-table-td {
  background: #182e46;
  color: #fff;
}

::v-deep .n-data-table-tr:nth-child(even) .n-data-table-td {
  background: #0e1e2e;
  color: #fff;
}

::v-deep .n-data-table .n-data-table-tr:hover {
  background-color: #1075c4 !important;
}

::v-deep .n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td {
  background-color: #1075c4 !important;
}

::v-deep .n-data-table .n-data-table-td {
  border-bottom: none !important;
}
</style>
